import './Party.scss'

import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'
import { TitleSmallA01 } from '../Common/SmallTitle'
import { TextList001 } from '../Common/TextList'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const PartyA01 = () => {
    const [Data, setData] = useState()
    const [Number, setNumber] = useState()
    const [PartyData, setPartyData] = useState()
    const [ProjectData, setProjectData] = useState()

    const { runAsync: getNumber } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setNumber(res.list.reduce((acc, cur) => acc + cur.partyMemberCount, 0))
            setPartyData(res.list)
        },
    })

    const { runAsync: getProject } = useRequest(Http, { manual: true, onSuccess: res => setProjectData(res.list) })
    const { runAsync: getPartyRanking } = useRequest(Http, { manual: true, onSuccess: res => setData(res) })

    useMount(() => {
        getNumber({ url: 'getPersonStatGetnPartyMemberStatByOrg' })
        getProject({ url: 'getPersonStatGetnPartyMember' })
        getPartyRanking({ url: 'getJsonInfoByUuid', data: { uuid: 'PartyRanking' } })
    })

    const top = [
        { uuid: 1, label: '排名', value: 'sortId', flex: 1 },
        { uuid: 2, label: '姓名', value: 'name', flex: 1 },
        { uuid: 3, label: '标段', value: 'org', flex: 1 },
        { uuid: 4, label: '分数', value: 'score', flex: 1 },
    ]

    return (
        <div className="PartyA01">
            <div className="Number">
                <span>党员总数：</span>
                <span>{Number}人</span>
            </div>
            <TitleSmallA01 title="项目党员人数" />
            <div className="Org">
                {PartyData &&
                    PartyData.map(({ uuid, tableName, partyMemberCount }) => (
                        <div key={uuid}>
                            <span>{tableName}</span>
                            <span>{partyMemberCount}人</span>
                        </div>
                    ))}
            </div>
            <TitleSmallA01 title="先进党支部" />
            <div className="Pro">
                {ProjectData &&
                    ProjectData.map(({ uuid, tableName }) => (
                        <div key={uuid}>
                            {ICON['wanchengshuai']}
                            <span>{tableName}</span>
                        </div>
                    ))}
            </div>
            <TitleSmallA01 title="党员教育排名" />
            <div className="Sort">{Data && <TextList001 Top={top} data={Data} />}</div>
        </div>
    )
}

export const PartyA02 = () => {
    const [Number, setNumber] = useState()
    const [PartyData, setPartyData] = useState()
    const [ProjectData, setProjectData] = useState()

    const { runAsync: getProject } = useRequest(Http, { manual: true, onSuccess: res => setProjectData(res.list) })
    const { runAsync: getNumber } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setNumber(res.list.reduce((acc, cur) => acc + cur.partyMemberCount, 0))
            setPartyData(res.list)
        },
    })

    useMount(() => {
        getNumber({ url: 'getPersonStatGetnPartyMemberStatByOrg' })
        getProject({ url: 'getPersonStatGetnPartyMember' })
    })

    return (
        <div className="PartyA02">
            <TitleSmallA01 title="项目党员人数" />
            <div className="top">
                <div className="num">
                    <img src={imageUrl + 'emblem.png'} alt="" />
                    <div>
                        <span>党员人数 : </span>
                        <span>{Number}人</span>
                    </div>
                </div>
                <div className="list">
                    {PartyData &&
                        PartyData.map(({ uuid, tableName, partyMemberCount }) => (
                            <div key={uuid}>
                                <span>{tableName}</span>
                                <span>{partyMemberCount}人</span>
                            </div>
                        ))}
                </div>
            </div>
            <TitleSmallA01 title="先进党支部" />
            <div className="btm">
                {ProjectData &&
                    ProjectData.map(({ uuid, tableName }) => (
                        <div key={uuid}>
                            <span>{tableName}</span>
                        </div>
                    ))}
            </div>
        </div>
    )
}
